<script setup lang="ts">
import { nextTick, onBeforeUnmount, onMounted, ref } from 'vue';

import { FireOutlined, TeamOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';

import { tablets } from '../../data/shrineData';

// 事件定义
const emit = defineEmits<{
  exit: [];
}>();
// 响应式数据
const tabletModalVisible = ref(false);
const selectedTablet = ref<any>(null);
const lightsOn = ref(true);
const musicPlaying = ref(false);

// 点香上供相关
const incenseModalVisible = ref(false);
const incenseForm = ref({
  ancestorId: '',
  count: 3,
  offerings: [] as string[],
  prayer: '',
});

// 献花留言相关
const flowerModalVisible = ref(false);
const flowerForm = ref({
  ancestorId: '',
  flowerType: 'chrysanthemum',
  message: '',
  isPublic: true,
});

const recentMessages = ref([
  {
    id: 1,
    userName: '朱瞻基',
    content: '追思太祖高皇帝创业之艰，愿世代子孙铭记先祖功德！',
    time: '2025-10-14 10:30',
  },
  {
    id: 2,
    userName: '朱棣',
    content: '父皇在天之灵，请庇佑大明江山永固！',
    time: '2025-10-13 14:20',
  },
  {
    id: 3,
    userName: '朱高炽',
    content: '感恩祖先庇佑，家族兴旺，子孙昌盛！',
    time: '2025-10-12 09:15',
  },
]);

// AI语音纪念相关
const aiVoiceModalVisible = ref(false);
const aiVoiceTab = ref('select');
const aiVoiceForm = ref({
  ancestorId: '',
  userMessage: '',
});

const selectedAncestorForAI = ref<any>(null);
const isAITalking = ref(false);
const isAIProcessing = ref(false);
const chatMessagesRef = ref<HTMLElement | null>(null);

const aiChatHistory = ref<
  Array<{ content: string; role: string; time: string }>
>([]);

const aiConversationHistory = ref([
  {
    id: 1,
    ancestorName: '朱元璋',
    time: '2025-10-13 15:30',
    topic: '建国历程与治国之道',
    rounds: 12,
  },
  {
    id: 2,
    ancestorName: '朱棣',
    time: '2025-10-10 10:00',
    topic: '北征蒙古与迁都北京',
    rounds: 8,
  },
]);

// 显示牌位详情
function showTabletDetail(tablet: any) {
  selectedTablet.value = tablet;
  tabletModalVisible.value = true;
  message.success(`查看 ${tablet.name} 的牌位信息`);
}

// 祭拜指定祖先
function worshipThisAncestor(tablet: any) {
  tabletModalVisible.value = false;
  message.success(`开始祭拜 ${tablet.name}`);
  // 这里可以触发祭拜流程
}

// 查看族谱关系
function viewFamilyTree(tablet: any) {
  message.info(`即将跳转到族谱页面，查看${tablet.name}的家族关系树`);
  tabletModalVisible.value = false;
}

// 灯光控制
function toggleLights() {
  lightsOn.value = !lightsOn.value;
  message.success(lightsOn.value ? '灯光已开启' : '灯光已关闭');
}

// 背景音乐
function playMusic() {
  musicPlaying.value = !musicPlaying.value;
  message.success(musicPlaying.value ? '背景音乐已开启' : '背景音乐已关闭');
}

// 退出室内
function exitInterior() {
  emit('exit');
}

// 点香上供相关函数
function openIncenseModal() {
  incenseModalVisible.value = true;
}

function submitIncense() {
  if (!incenseForm.value.ancestorId) {
    message.warning('请选择祭拜的祖先');
    return;
  }

  const ancestor = tablets.find((t) => t.id === incenseForm.value.ancestorId);
  message.loading('正在上链存证...', 2).then(() => {
    message.success(
      `🔥 已向 ${ancestor?.name} 敬香${incenseForm.value.count}柱\n✓ 祭拜记录已上链\n✓ 功德+${incenseForm.value.count * 10}`,
    );
    incenseModalVisible.value = false;
    // 重置表单
    incenseForm.value = {
      ancestorId: '',
      count: 3,
      offerings: [],
      prayer: '',
    };
  });
}

// 献花留言相关函数
function openFlowerModal() {
  flowerModalVisible.value = true;
}

function submitFlower() {
  if (!flowerForm.value.ancestorId) {
    message.warning('请选择纪念的祖先');
    return;
  }

  if (!flowerForm.value.message.trim()) {
    message.warning('请写下您的留言');
    return;
  }

  const ancestor = tablets.find((t) => t.id === flowerForm.value.ancestorId);
  const flowerName = {
    chrysanthemum: '菊花',
    lily: '百合',
    rose: '玫瑰',
    orchid: '兰花',
  }[flowerForm.value.flowerType];

  message.loading('正在上链存证...', 2).then(() => {
    // 添加到留言列表
    recentMessages.value.unshift({
      id: Date.now(),
      userName: '当前用户',
      content: flowerForm.value.message,
      time: new Date().toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
      }),
    });

    message.success(
      `🌸 已向 ${ancestor?.name} 敬献${flowerName}\n✓ 留言已上链\n✓ ${flowerForm.value.isPublic ? '所有家族成员可见' : '仅您可见'}`,
    );
    flowerModalVisible.value = false;
    // 重置表单
    flowerForm.value = {
      ancestorId: '',
      flowerType: 'chrysanthemum',
      message: '',
      isPublic: true,
    };
  });
}

// AI语音纪念相关函数
function openAIVoiceModal() {
  aiVoiceModalVisible.value = true;
  aiVoiceTab.value = 'select';
}

function selectAncestorForAI(tablet: any) {
  aiVoiceForm.value.ancestorId = tablet.id;
  selectedAncestorForAI.value = tablet;
  aiVoiceTab.value = 'chat';

  // 添加欢迎消息
  if (aiChatHistory.value.length === 0) {
    aiChatHistory.value.push({
      role: 'assistant',
      content: `吾乃${tablet.name}，${tablet.title}。后世子孙，有何想问？`,
      time: new Date().toLocaleTimeString('zh-CN', {
        hour: '2-digit',
        minute: '2-digit',
      }),
    });
  }

  message.success(`已连接 ${tablet.name} 的AI数字孪生`);
}

function startAIVoice() {
  isAITalking.value = true;
  message.loading('正在启动语音识别...', 2).then(() => {
    isAITalking.value = false;
    message.info('请使用文字输入与祖先对话');
  });
}

async function sendAIMessage() {
  if (!aiVoiceForm.value.userMessage.trim()) {
    message.warning('请输入您想说的话');
    return;
  }

  // 添加用户消息
  aiChatHistory.value.push({
    role: 'user',
    content: aiVoiceForm.value.userMessage,
    time: new Date().toLocaleTimeString('zh-CN', {
      hour: '2-digit',
      minute: '2-digit',
    }),
  });

  const userMessage = aiVoiceForm.value.userMessage;
  aiVoiceForm.value.userMessage = '';

  // 滚动到底部
  await nextTick();
  if (chatMessagesRef.value) {
    chatMessagesRef.value.scrollTop = chatMessagesRef.value.scrollHeight;
  }

  // 模拟AI回复
  isAIProcessing.value = true;
  setTimeout(() => {
    const aiResponses = [
      `朕闻${userMessage}，深有感触。创业艰难，守业更难。尔等当铭记祖训，勤勉治家。`,
      `善哉！尔等能问此事，说明心系家族。朕当年亦曾面临相似困境...`,
      `天下事，当以大局为重。家族兴旺，需子孙齐心。尔等切记。`,
      `朕观尔之疑问，实乃人之常情。当年朕初创业时，亦有此虑...`,
      `好问！治家如治国，需恩威并施。尔等当学先祖之道，方能家族长兴。`,
    ];

    aiChatHistory.value.push({
      role: 'assistant',
      content: aiResponses[Math.floor(Math.random() * aiResponses.length)],
      time: new Date().toLocaleTimeString('zh-CN', {
        hour: '2-digit',
        minute: '2-digit',
      }),
    });

    isAIProcessing.value = false;

    // 滚动到底部
    nextTick(() => {
      if (chatMessagesRef.value) {
        chatMessagesRef.value.scrollTop = chatMessagesRef.value.scrollHeight;
      }
    });
  }, 2000);
}

function loadAIConversation(item: any) {
  message.info(`加载与 ${item.ancestorName} 的历史对话`);
  aiVoiceTab.value = 'chat';
}

function viewAIConversation(item: any) {
  message.info(`查看完整对话记录：${item.topic}`);
}

// 生命周期
onMounted(() => {
  // 播放背景音效
  message.success('进入朱氏宗祠，感受皇家威严');
});

onBeforeUnmount(() => {
  // 清理资源
});
</script>

<template>
  <div class="interior-shrine">
    <!-- 顶部横幅 -->
    <div class="banner">
      <div class="banner-text">朱氏宗祠</div>
      <div class="banner-subtitle">皇家威严 · 世代传承</div>
    </div>

    <!-- 主祠堂区域 -->
    <div class="main-hall">
      <!-- 左侧对联 -->
      <div class="couplet left">
        <div class="couplet-text">槛外皇族世泽长</div>
      </div>

      <!-- 中央牌位区域 -->
      <div class="altar-area">
        <!-- 屋顶装饰 -->
        <div class="roof-decoration">
          <div class="roof-tiles"></div>
          <div class="roof-ridge">双龙戏珠</div>
        </div>

        <!-- 牌位背景 -->
        <div class="altar-backdrop">
          <div class="dragon-panel">
            <div class="dragon-text">朱氏先祖神位</div>
          </div>
        </div>

        <!-- 牌位展示区 -->
        <div class="tablet-display">
          <div class="tablet-row">
            <div
              v-for="(tablet, index) in tablets"
              :key="tablet.id"
              class="tablet-item"
              @click="showTabletDetail(tablet)"
            >
              <div class="tablet-title">{{ tablet.title }}</div>
              <div class="tablet-name">{{ tablet.name }}</div>
              <div class="tablet-years">
                {{ tablet.birthYear }} - {{ tablet.deathYear }}
              </div>
            </div>
          </div>
        </div>

        <!-- 祭台 -->
        <div class="offering-table">
          <div class="incense-burner">
            <div class="incense-sticks">
              <div class="stick"></div>
              <div class="stick"></div>
              <div class="stick"></div>
            </div>
            <div class="smoke-effect"></div>
          </div>
          <div class="candles">
            <div class="candle"></div>
            <div class="candle"></div>
            <div class="candle"></div>
          </div>
        </div>
      </div>

      <!-- 右侧对联 -->
      <div class="couplet right">
        <div class="couplet-text">堂前宝树家声远</div>
      </div>
    </div>

    <!-- 底部装饰 -->
    <div class="bottom-decoration">
      <div class="dragon-pattern"></div>
      <div class="imperial-seal">明</div>
    </div>

    <!-- 功能提示 -->
    <div class="feature-hint">
      <div class="hint-text">点击下方按钮体验功能</div>
    </div>

    <!-- 主要功能按钮 -->
    <div class="main-actions">
      <button class="action-btn incense" @click="openIncenseModal">
        <span class="action-icon">🔥</span>
        <span class="action-text">点香上供</span>
      </button>
      <button class="action-btn flower" @click="openFlowerModal">
        <span class="action-icon">🌸</span>
        <span class="action-text">献花留言</span>
      </button>
      <button class="action-btn ai" @click="openAIVoiceModal">
        <span class="action-icon">🎤</span>
        <span class="action-text">AI语音纪念</span>
      </button>
    </div>

    <!-- 控制按钮 -->
    <div class="control-panel">
      <button class="control-btn" @click="toggleLights">
        <span class="btn-icon">🕯️</span>
        灯光控制
      </button>
      <button class="control-btn" @click="playMusic">
        <span class="btn-icon">🎵</span>
        背景音乐
      </button>
      <button class="control-btn primary" @click="exitInterior">
        <span class="btn-icon">🚪</span>
        退出祠堂
      </button>
    </div>

    <!-- 点香上供Modal -->
    <a-modal
      :open="incenseModalVisible"
      @cancel="incenseModalVisible = false"
      title="🔥 点香上供"
      width="700px"
      @ok="submitIncense"
    >
      <div class="incense-worship">
        <a-alert
          message="虔诚祭拜"
          description="点香上供是对祖先最崇高的敬意，三柱清香，寄托哀思"
          type="info"
          show-icon
          style="margin-bottom: 24px"
        />

        <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
          <a-form-item label="选择祖先">
            <a-select
              v-model:value="incenseForm.ancestorId"
              placeholder="请选择祭拜的祖先"
            >
              <a-select-option
                v-for="tablet in tablets"
                :key="tablet.id"
                :value="tablet.id"
              >
                {{ tablet.name }} （{{ tablet.title }}）
              </a-select-option>
            </a-select>
          </a-form-item>

          <a-form-item label="香炷数量">
            <a-radio-group v-model:value="incenseForm.count">
              <a-radio :value="1">一柱香（表达思念）</a-radio>
              <a-radio :value="3">三柱香（传统礼仪）</a-radio>
              <a-radio :value="9">九柱香（至高敬意）</a-radio>
            </a-radio-group>
          </a-form-item>

          <a-form-item label="供品选择">
            <a-checkbox-group v-model:value="incenseForm.offerings">
              <a-row :gutter="[16, 16]">
                <a-col :span="8">
                  <a-checkbox value="fruit">🍎 新鲜水果</a-checkbox>
                </a-col>
                <a-col :span="8">
                  <a-checkbox value="wine">🍶 美酒佳酿</a-checkbox>
                </a-col>
                <a-col :span="8">
                  <a-checkbox value="tea">🍵 清香茶叶</a-checkbox>
                </a-col>
                <a-col :span="8">
                  <a-checkbox value="rice">🍚 五谷杂粮</a-checkbox>
                </a-col>
                <a-col :span="8">
                  <a-checkbox value="meat">🍖 三牲祭品</a-checkbox>
                </a-col>
                <a-col :span="8">
                  <a-checkbox value="dessert">🍰 糕点甜食</a-checkbox>
                </a-col>
              </a-row>
            </a-checkbox-group>
          </a-form-item>

          <a-form-item label="祈愿内容">
            <a-textarea
              v-model:value="incenseForm.prayer"
              :rows="4"
              placeholder="在此写下您的祈愿和思念..."
            />
          </a-form-item>
        </a-form>

        <a-alert
          message="链上存证"
          description="您的祭拜记录将永久保存在区块链上，成为家族历史的一部分"
          type="success"
          show-icon
        />
      </div>
    </a-modal>

    <!-- 献花留言Modal -->
    <a-modal
      :open="flowerModalVisible"
      @cancel="flowerModalVisible = false"
      title="🌸 献花留言"
      width="700px"
      @ok="submitFlower"
    >
      <div class="flower-memorial">
        <a-alert
          message="鲜花寄哀思"
          description="献上一束鲜花，写下您的思念，让爱永驻心间"
          type="info"
          show-icon
          style="margin-bottom: 24px"
        />

        <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
          <a-form-item label="选择祖先">
            <a-select
              v-model:value="flowerForm.ancestorId"
              placeholder="请选择纪念的祖先"
            >
              <a-select-option
                v-for="tablet in tablets"
                :key="tablet.id"
                :value="tablet.id"
              >
                {{ tablet.name }} （{{ tablet.title }}）
              </a-select-option>
            </a-select>
          </a-form-item>

          <a-form-item label="鲜花类型">
            <a-radio-group v-model:value="flowerForm.flowerType">
              <a-space direction="vertical">
                <a-radio value="chrysanthemum">
                  <span style="font-size: 20px">🌼</span> 菊花（传统祭祀）
                </a-radio>
                <a-radio value="lily">
                  <span style="font-size: 20px">🌸</span> 百合（纯洁思念）
                </a-radio>
                <a-radio value="rose">
                  <span style="font-size: 20px">🌹</span> 玫瑰（深情缅怀）
                </a-radio>
                <a-radio value="orchid">
                  <span style="font-size: 20px">🌺</span> 兰花（高雅敬意）
                </a-radio>
              </a-space>
            </a-radio-group>
          </a-form-item>

          <a-form-item label="留言内容">
            <a-textarea
              v-model:value="flowerForm.message"
              :rows="6"
              placeholder="写下您想对祖先说的话...&#10;&#10;例如：&#10;- 追思祖先功德&#10;- 分享近期生活&#10;- 寻求祖先庇佑"
            />
          </a-form-item>

          <a-form-item label="是否公开">
            <a-radio-group v-model:value="flowerForm.isPublic">
              <a-radio :value="true">公开（家族成员可见）</a-radio>
              <a-radio :value="false">私密（仅自己可见）</a-radio>
            </a-radio-group>
          </a-form-item>
        </a-form>

        <a-divider>最近留言</a-divider>
        <div class="recent-messages">
          <div
            v-for="msg in recentMessages.slice(0, 3)"
            :key="msg.id"
            class="message-item"
          >
            <div class="message-header">
              <strong>{{ msg.userName }}</strong>
              <span style="font-size: 12px; color: #999">{{ msg.time }}</span>
            </div>
            <div class="message-content">{{ msg.content }}</div>
          </div>
        </div>
      </div>
    </a-modal>

    <!-- AI语音纪念Modal -->
    <a-modal
      :open="aiVoiceModalVisible"
      @cancel="aiVoiceModalVisible = false"
      title="🎤 AI语音纪念"
      width="800px"
      :footer="null"
    >
      <div class="ai-voice-memorial">
        <a-alert
          message="AI数字永生"
          description="通过AI技术，重现祖先的声音和形象，让后代能够聆听先人的教诲"
          type="info"
          show-icon
          style="margin-bottom: 24px"
        />

        <a-tabs v-model:active-key="aiVoiceTab">
          <!-- 选择祖先 -->
          <a-tab-pane key="select" tab="选择祖先">
            <a-row :gutter="[16, 16]">
              <a-col v-for="tablet in tablets" :key="tablet.id" :span="8">
                <a-card
                  hoverable
                  class="ancestor-card"
                  :class="[{ selected: aiVoiceForm.ancestorId === tablet.id }]"
                  @click="selectAncestorForAI(tablet)"
                >
                  <div class="ancestor-avatar">{{ tablet.name[0] }}</div>
                  <div class="ancestor-name">{{ tablet.name }}</div>
                  <div class="ancestor-title">{{ tablet.title }}</div>
                  <a-tag v-if="tablet.hasAIVoice" color="green">
                    <span style="font-size: 12px">✓</span> 已训练
                  </a-tag>
                  <a-tag v-else color="orange">训练中</a-tag>
                </a-card>
              </a-col>
            </a-row>
          </a-tab-pane>

          <!-- 语音对话 -->
          <a-tab-pane
            key="chat"
            tab="语音对话"
            :disabled="!aiVoiceForm.ancestorId"
          >
            <div v-if="selectedAncestorForAI" class="ai-chat-area">
              <div class="ai-ancestor-info">
                <div class="ai-avatar">{{ selectedAncestorForAI.name[0] }}</div>
                <div class="ai-info">
                  <h3>{{ selectedAncestorForAI.name }}</h3>
                  <p>{{ selectedAncestorForAI.title }}</p>
                </div>
                <a-button
                  type="primary"
                  :loading="isAITalking"
                  @click="startAIVoice"
                >
                  {{ isAITalking ? '正在聆听...' : '🎤 开始对话' }}
                </a-button>
              </div>

              <a-divider />

              <div class="chat-messages" ref="chatMessagesRef">
                <div
                  v-for="(msg, index) in aiChatHistory"
                  :key="index"
                  class="chat-message"
                  :class="[msg.role]"
                >
                  <div class="message-avatar">
                    {{
                      msg.role === 'user' ? '我' : selectedAncestorForAI.name[0]
                    }}
                  </div>
                  <div class="message-bubble">
                    <div class="message-text">{{ msg.content }}</div>
                    <div class="message-time">{{ msg.time }}</div>
                  </div>
                </div>
              </div>

              <div class="chat-input-area">
                <a-textarea
                  v-model:value="aiVoiceForm.userMessage"
                  :rows="3"
                  placeholder="输入您想问的问题或想说的话...&#10;&#10;例如：&#10;- 太祖爷爷，您是如何建立大明的？&#10;- 请给我一些人生建议&#10;- 讲讲您的英雄事迹"
                  @keydown.enter.ctrl="sendAIMessage"
                />
                <div style="margin-top: 12px; text-align: right">
                  <a-space>
                    <a-button @click="aiVoiceForm.userMessage = ''">
                      清空
                    </a-button>
                    <a-button
                      type="primary"
                      @click="sendAIMessage"
                      :loading="isAIProcessing"
                    >
                      发送 (Ctrl+Enter)
                    </a-button>
                  </a-space>
                </div>
              </div>
            </div>
          </a-tab-pane>

          <!-- 历史记录 -->
          <a-tab-pane key="history" tab="对话历史">
            <a-list
              :data-source="aiConversationHistory"
              :pagination="{ pageSize: 5 }"
            >
              <template #renderItem="{ item }">
                <a-list-item>
                  <a-list-item-meta>
                    <template #title>
                      与 {{ item.ancestorName }} 的对话
                    </template>
                    <template #description>
                      <div>时间：{{ item.time }}</div>
                      <div>话题：{{ item.topic }}</div>
                      <div>轮次：{{ item.rounds }} 次对话</div>
                    </template>
                  </a-list-item-meta>
                  <template #actions>
                    <a @click="loadAIConversation(item)">继续</a>
                    <a @click="viewAIConversation(item)">查看</a>
                  </template>
                </a-list-item>
              </template>
            </a-list>
          </a-tab-pane>
        </a-tabs>
      </div>
    </a-modal>

    <!-- 牌位详情Modal -->
    <a-modal
      :open="tabletModalVisible"
      @cancel="tabletModalVisible = false"
      :title="`🪧 ${selectedTablet?.name} - 牌位详情`"
      width="800px"
      :footer="null"
    >
      <div v-if="selectedTablet" class="tablet-detail">
        <div class="detail-header">
          <div class="ancestor-portrait">
            <div class="portrait-placeholder">👑</div>
          </div>
          <div class="ancestor-info">
            <h2>{{ selectedTablet.name }}</h2>
            <h3>{{ selectedTablet.title }}</h3>
            <p class="lifespan">
              {{ selectedTablet.birthYear }} -
              {{ selectedTablet.deathYear }} (享年{{
                selectedTablet.deathYear - selectedTablet.birthYear
              }}岁)
            </p>
          </div>
        </div>

        <div class="detail-content">
          <div class="achievements">
            <h4>🏆 主要成就</h4>
            <p>{{ selectedTablet.achievement }}</p>
          </div>

          <div class="biography">
            <h4>📜 生平简介</h4>
            <p>{{ selectedTablet.biography }}</p>
          </div>

          <div class="worship-records">
            <h4>🕯️ 祭祀记录</h4>
            <a-timeline>
              <a-timeline-item
                v-for="record in selectedTablet.recentWorship"
                :key="record.id"
                color="green"
              >
                <div class="worship-item">
                  <div class="worship-date">{{ record.date }}</div>
                  <div class="worship-person">
                    祭祀人：{{ record.worshiper }}
                  </div>
                  <div class="worship-offering">
                    祭品：{{ record.offerings }}
                  </div>
                </div>
              </a-timeline-item>
            </a-timeline>
          </div>
        </div>

        <div class="detail-actions">
          <a-button
            type="primary"
            size="large"
            @click="worshipThisAncestor(selectedTablet)"
          >
            <FireOutlined /> 祭拜此祖先
          </a-button>
          <a-button size="large" @click="viewFamilyTree(selectedTablet)">
            <TeamOutlined /> 查看族谱关系
          </a-button>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<style scoped lang="scss">
// 动画效果
@keyframes smoke {
  0%,
  100% {
    opacity: 0.3;
    transform: translateX(-50%) translateY(0) scale(1);
  }

  50% {
    opacity: 0.8;
    transform: translateX(-50%) translateY(-5px) scale(1.2);
  }
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }

  50% {
    opacity: 0.8;
    transform: translateY(-50%) scale(1.05);
  }
}

@keyframes bounce {
  0%,
  100% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(-10px);
  }
}

@keyframes bounceUp {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

@keyframes flicker {
  0%,
  100% {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }

  50% {
    opacity: 0.7;
    transform: translateX(-50%) scale(0.8);
  }
}

// 响应式设计
@media (max-width: 768px) {
  .interior-shrine {
    .banner .banner-text {
      font-size: 32px;
    }

    .main-hall {
      padding: 100px 20px;

      .couplet {
        width: 60px;
        height: 200px;
        font-size: 18px;

        &.left {
          left: 20px;
        }

        &.right {
          right: 20px;
        }
      }

      .altar-area {
        width: 90%;
        height: 400px;
      }
    }

    .control-panel {
      top: 10px;
      right: 10px;
      flex-flow: row wrap;

      .control-btn {
        padding: 8px 12px;
        font-size: 12px;
      }
    }
  }

  // 功能提示
  .feature-hint {
    position: fixed;
    bottom: 120px;
    left: 50%;
    z-index: 9999;
    padding: 15px 25px;
    font-size: 18px;
    font-weight: bold;
    color: #ffd700;
    background: linear-gradient(135deg, #dc143c, #8b0000);
    border: 3px solid #ffd700;
    border-radius: 25px;
    box-shadow: 0 6px 20px rgb(220 20 60 / 60%);
    transform: translateX(-50%);
    animation: pulse 2s infinite;

    .hint-arrow {
      margin-bottom: 5px;
      font-size: 20px;
      animation: bounceUp 1.5s infinite;
    }

    .hint-text {
      white-space: nowrap;
    }
  }

  // 主要功能按钮
  .main-actions {
    position: fixed;
    bottom: 20px;
    left: 50%;
    z-index: 10000;
    display: flex;
    flex-direction: row;
    gap: 25px;
    transform: translateX(-50%);

    .action-btn {
      display: flex;
      flex-direction: column;
      gap: 8px;
      align-items: center;
      width: 160px;
      padding: 20px 18px;
      font-size: 18px;
      font-weight: bold;
      color: #8b0000;
      cursor: pointer;
      background: linear-gradient(135deg, #ffd700 0%, #ffa500 100%);
      border: 4px solid #ffd700;
      border-radius: 18px;
      box-shadow: 0 6px 20px rgb(255 215 0 / 60%);
      transition: all 0.3s ease;

      &:hover {
        background: linear-gradient(135deg, #ffa500 0%, #ffd700 100%);
        border-color: #dc143c;
        box-shadow: 0 15px 40px rgb(255 215 0 / 90%);
        transform: translateY(-8px) scale(1.15);
      }

      .action-icon {
        margin-bottom: 5px;
        font-size: 40px;
      }

      .action-text {
        font-size: 16px;
        font-weight: bold;
        white-space: nowrap;
      }

      &.incense {
        color: white;
        background: linear-gradient(135deg, #ff4500 0%, #ff6347 100%);
      }

      &.flower {
        color: white;
        background: linear-gradient(135deg, #ff69b4 0%, #ff1493 100%);
      }

      &.ai {
        color: white;
        background: linear-gradient(135deg, #9370db 0%, #8a2be2 100%);
      }
    }
  }

  // AI聊天相关样式
  .ai-chat-area {
    .ai-ancestor-info {
      display: flex;
      gap: 16px;
      align-items: center;
      padding: 16px;
      background: linear-gradient(135deg, #f0f0f0, #e0e0e0);
      border-radius: 8px;

      .ai-avatar {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 60px;
        height: 60px;
        font-size: 24px;
        font-weight: bold;
        color: #8b0000;
        background: linear-gradient(135deg, #ffd700, #ffa500);
        border-radius: 50%;
      }

      .ai-info {
        flex: 1;

        h3 {
          margin: 0 0 4px;
          font-size: 18px;
          color: #333;
        }

        p {
          margin: 0;
          font-size: 14px;
          color: #666;
        }
      }
    }

    .chat-messages {
      max-height: 400px;
      padding: 16px;
      margin: 16px 0;
      overflow-y: auto;
      background: #f9f9f9;
      border-radius: 8px;

      .chat-message {
        display: flex;
        gap: 12px;
        margin-bottom: 16px;

        &.user {
          flex-direction: row-reverse;

          .message-bubble {
            color: white;
            background: #1890ff;
          }

          .message-avatar {
            color: white;
            background: #1890ff;
          }
        }

        .message-avatar {
          display: flex;
          flex-shrink: 0;
          align-items: center;
          justify-content: center;
          width: 40px;
          height: 40px;
          font-size: 14px;
          font-weight: bold;
          color: #8b0000;
          background: #ffd700;
          border-radius: 50%;
        }

        .message-bubble {
          max-width: 70%;
          padding: 12px 16px;
          background: white;
          border-radius: 12px;
          box-shadow: 0 2px 8px rgb(0 0 0 / 10%);

          .message-text {
            margin-bottom: 4px;
            font-size: 14px;
            line-height: 1.6;
          }

          .message-time {
            font-size: 12px;
            color: rgb(255 255 255 / 70%);
            text-align: right;
          }
        }

        &.assistant .message-bubble .message-time {
          color: #999;
        }
      }
    }
  }

  .ancestor-card {
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;

    &.selected {
      border: 2px solid #1890ff;
      box-shadow: 0 4px 12px rgb(24 144 255 / 30%);
    }

    &:hover {
      box-shadow: 0 8px 16px rgb(0 0 0 / 10%);
      transform: translateY(-4px);
    }

    .ancestor-avatar {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 60px;
      height: 60px;
      margin: 0 auto 12px;
      font-size: 24px;
      font-weight: bold;
      color: #8b0000;
      background: linear-gradient(135deg, #ffd700, #ffa500);
      border-radius: 50%;
    }

    .ancestor-name {
      margin-bottom: 4px;
      font-size: 16px;
      font-weight: bold;
    }

    .ancestor-title {
      margin-bottom: 8px;
      font-size: 12px;
      color: #666;
    }
  }

  .recent-messages {
    .message-item {
      padding: 12px;
      margin-bottom: 12px;
      background: #f5f5f5;
      border-radius: 8px;

      .message-header {
        display: flex;
        justify-content: space-between;
        margin-bottom: 8px;
      }

      .message-content {
        font-size: 14px;
        line-height: 1.6;
        color: #333;
      }
    }
  }
}

.interior-shrine {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  font-family: 'Microsoft YaHei', STKaiti, serif;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);

  // 顶部横幅
  .banner {
    position: absolute;
    top: 20px;
    left: 50%;
    z-index: 100;
    text-align: center;
    transform: translateX(-50%);

    .banner-text {
      margin-bottom: 8px;
      font-size: 48px;
      font-weight: bold;
      color: #ffd700;
      letter-spacing: 8px;
      text-shadow: 3px 3px 6px rgb(0 0 0 / 80%);
    }

    .banner-subtitle {
      font-size: 18px;
      color: #ffa500;
      letter-spacing: 4px;
      text-shadow: 2px 2px 4px rgb(0 0 0 / 60%);
    }
  }

  // 主祠堂区域
  .main-hall {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 120px 60px;

    // 对联
    .couplet {
      position: absolute;
      top: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 80px;
      height: 300px;
      background: linear-gradient(45deg, #8b0000, #dc143c);
      border: 3px solid #ffd700;
      border-radius: 8px;
      box-shadow: 0 0 20px rgb(255 215 0 / 50%);
      transform: translateY(-50%);

      &.left {
        left: 40px;
      }

      &.right {
        right: 40px;
      }

      .couplet-text {
        font-size: 24px;
        font-weight: bold;
        color: #ffd700;
        letter-spacing: 8px;
        text-shadow: 2px 2px 4px rgb(0 0 0 / 80%);
        writing-mode: vertical-rl;
        text-orientation: mixed;
      }
    }

    // 中央牌位区域
    .altar-area {
      position: relative;
      width: 600px;
      height: 500px;
      background: linear-gradient(180deg, #2c1810 0%, #1a0f08 100%);
      border: 4px solid #ffd700;
      border-radius: 12px;
      box-shadow: 0 0 30px rgb(255 215 0 / 40%);

      // 屋顶装饰
      .roof-decoration {
        position: absolute;
        top: -40px;
        right: -20px;
        left: -20px;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 40px;
        background: linear-gradient(45deg, #dc143c, #8b0000);
        border-radius: 20px 20px 0 0;

        .roof-tiles {
          position: absolute;
          top: 0;
          right: 0;
          left: 0;
          height: 100%;
          background: repeating-linear-gradient(
            90deg,
            #ffd700 0,
            #ffd700 8px,
            #dc143c 8px,
            #dc143c 16px
          );
          border-radius: 20px 20px 0 0;
        }

        .roof-ridge {
          position: relative;
          z-index: 2;
          font-size: 16px;
          font-weight: bold;
          color: #ffd700;
          text-shadow: 2px 2px 4px rgb(0 0 0 / 80%);
        }
      }

      // 牌位背景
      .altar-backdrop {
        position: absolute;
        top: 60px;
        right: 20px;
        left: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 200px;
        background: linear-gradient(135deg, #4a3c2a, #2c1810);
        border: 2px solid #ffd700;
        border-radius: 8px;

        .dragon-panel {
          text-align: center;

          .dragon-text {
            font-size: 28px;
            font-weight: bold;
            color: #ffd700;
            letter-spacing: 6px;
            text-shadow: 2px 2px 4px rgb(0 0 0 / 80%);
          }
        }
      }

      // 牌位展示区
      .tablet-display {
        position: absolute;
        top: 280px;
        right: 40px;
        left: 40px;
        height: 120px;

        .tablet-row {
          display: flex;
          align-items: center;
          justify-content: space-between;
          height: 100%;

          .tablet-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 80px;
            height: 100px;
            cursor: pointer;
            background: linear-gradient(135deg, #ffd700, #ffa500);
            border: 2px solid #dc143c;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgb(255 215 0 / 30%);
            transition: all 0.3s ease;

            &:hover {
              border-color: #ffd700;
              box-shadow: 0 8px 20px rgb(255 215 0 / 60%);
              transform: translateY(-5px);
            }

            .tablet-title {
              margin-bottom: 4px;
              font-size: 12px;
              font-weight: bold;
              color: #8b0000;
              text-align: center;
            }

            .tablet-name {
              margin-bottom: 2px;
              font-size: 14px;
              font-weight: bold;
              color: #dc143c;
              text-align: center;
            }

            .tablet-years {
              font-size: 10px;
              color: #8b0000;
              text-align: center;
            }
          }
        }
      }

      // 祭台
      .offering-table {
        position: absolute;
        right: 50px;
        bottom: 20px;
        left: 50px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        height: 80px;
        background: linear-gradient(135deg, #8b4513, #654321);
        border: 2px solid #ffd700;
        border-radius: 8px;

        .incense-burner {
          position: relative;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 60px;
          height: 40px;
          background: linear-gradient(135deg, #ffd700, #ffa500);
          border-radius: 50%;

          .incense-sticks {
            position: relative;
            display: flex;
            gap: 2px;
            width: 20px;
            height: 30px;

            .stick {
              width: 2px;
              height: 100%;
              background: #8b0000;
              border-radius: 1px;
            }
          }

          .smoke-effect {
            position: absolute;
            top: -10px;
            left: 50%;
            width: 4px;
            height: 20px;
            background: linear-gradient(
              180deg,
              rgb(255 255 255 / 80%),
              transparent
            );
            border-radius: 2px;
            transform: translateX(-50%);
            animation: smoke 2s ease-in-out infinite;
          }
        }

        .candles {
          display: flex;
          gap: 10px;

          .candle {
            position: relative;
            width: 8px;
            height: 30px;
            background: linear-gradient(180deg, #ffd700, #ffa500);
            border-radius: 4px;

            &::after {
              position: absolute;
              top: -3px;
              left: 50%;
              width: 3px;
              height: 6px;
              content: '';
              background: #ff4500;
              border-radius: 50%;
              transform: translateX(-50%);
              animation: flicker 1.5s ease-in-out infinite alternate;
            }
          }
        }
      }
    }
  }

  // 底部装饰
  .bottom-decoration {
    position: absolute;
    bottom: 20px;
    left: 50%;
    display: flex;
    gap: 20px;
    align-items: center;
    transform: translateX(-50%);

    .dragon-pattern {
      position: relative;
      width: 200px;
      height: 40px;
      background: linear-gradient(90deg, #ffd700, #ffa500, #ffd700);
      border-radius: 20px;

      &::before,
      &::after {
        position: absolute;
        top: 50%;
        font-size: 20px;
        content: '🐉';
        transform: translateY(-50%);
      }

      &::before {
        left: -10px;
      }

      &::after {
        right: -10px;
      }
    }

    .imperial-seal {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 60px;
      height: 60px;
      font-size: 24px;
      font-weight: bold;
      color: #ffd700;
      text-shadow: 2px 2px 4px rgb(0 0 0 / 80%);
      background: linear-gradient(135deg, #dc143c, #8b0000);
      border: 3px solid #ffd700;
      border-radius: 50%;
    }
  }

  // 控制面板
  .control-panel {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 10px;

    .control-btn {
      display: flex;
      gap: 8px;
      align-items: center;
      padding: 12px 20px;
      font-size: 14px;
      font-weight: bold;
      color: #ffd700;
      cursor: pointer;
      background: linear-gradient(135deg, #2c1810, #1a0f08);
      border: 2px solid #ffd700;
      border-radius: 8px;
      transition: all 0.3s ease;

      &:hover {
        color: #8b0000;
        background: linear-gradient(135deg, #ffd700, #ffa500);
        box-shadow: 0 4px 12px rgb(255 215 0 / 40%);
        transform: translateY(-2px);
      }

      &.primary {
        background: linear-gradient(135deg, #dc143c, #8b0000);

        &:hover {
          color: #8b0000;
          background: linear-gradient(135deg, #ffd700, #ffa500);
        }
      }

      .btn-icon {
        font-size: 16px;
      }
    }
  }
}
</style>
